//入口文件
import Vue from 'vue';

//1.1导入路由的包,并手动安装到vue上
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//1.2导入自己的router.js路由模块
import router from './router.js'

//2.1导入vue-resource并手动安装
import VueResource from 'vue-resource'
Vue.use(VueResource)

//导入注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)

//每次进入网站，index.js在刚调用的时候，先从本地存储中，把购物车数据读取出来
var car = JSON.parse(localStorage.getItem('car') || '[]' );

var store = new Vuex.Store({
     state:{ //this.$store.state.***
        car:car
        //将购物车中的商品数据，用一个数组存储起来，储存商品对象
        //{id: , count:购买的数量, price:商品价格, selected:ture/false}
     },
     mutations:{//this.$store.commit("方法名称","按需传递唯一的参数")
        //点击加入购物车，把商品信息，保存到    store中的car上
        addToCar(state,goodsinfo){
            //假设购物车没有找到对应商品
            var flag=false;

            state.car.some(function(item){
                if(item.id==goodsinfo.id){
                    item.count+=parseInt(goodsinfo.count);
                    flag = true;
                    return true
                }
            })
            //如果循环完毕，得到的flag还是false，则把商品数据直接push进car
            if(!flag){
                this.state.car.push(goodsinfo)
            }

            //当更新car之后，把car数组存储到本地的localStorage
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        //修改购物车中的商品数量
        updateshopCar(state,goodsinfo){
            this.state.car.some(function(item){
                if(item.id==goodsinfo.id){
                    item.count=parseInt(goodsinfo.count);
                    return true;
                }
            })
            //当修改完商品数量，把最新购物车数据保存到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        //根据ID 从store中的购物车中删除对应的那条商品数据
        removeFormCar(state,id){
            state.car.some(function(item,i){
                if(item.id==id){
                    state.car.splice(i,1);
                    return true;
                }
            })
            //当删除完商品数量，把最新购物车数据保存到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        //更新商品select选中状态
        updateGoodsSelected(state,id){
            state.car.some(function(item){
                if(item.id==id){
                    item.selected=!item.selected;
                    return true;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        }
     },
     getters:{ //this.$store.getters.***
        //计算商品总数
        getAllCount(state){
            var c = 0;
            state.car.forEach(function(item){
                c+= item.count
            });
            return c;
        },
        //获取所有商品的select选中状态
        getGoodsSelected(state){
            var o= {};
            state.car.forEach(function(item){
                o[item.id]= item.selected;
            });
            return o;
        },
        //计算商品总量和总额
        getGoodsCountAndAmount(state){
            var o ={
                count:0,
                amount:0
            };
            state.car.forEach(function(item){
                if(item.selected){
                    o.count+=item.count;
                    o.amount+=item.price * item.count;
                }
            })
            return o;
        }
     }
})


//导入图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//设置请求的根路径
Vue.http.options.root= 'http://vue.studyit.io'
//全局设置post的时候表单数据格式
Vue.http.options.emulateJSON = true;

Vue.filter('dateFormat',function(dateStr){
    var dt=new Date(dateStr);
    var y=dt.getFullYear() 
    var m=dt.getMonth()+1
    var d=dt.getDate()
    var hh=dt.getHours()
    var mm=dt.getMinutes()
    var ss=dt.getSeconds()

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

})

//按需导入mint-ui的组件 
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);

// 实现懒加载需要全部导入mint-ui,按需导入实现可以实现懒加载，但是加载的图标不会显示出来！！~
import MintUI from 'mint-ui'
Vue.use(MintUI);
import 'mint-ui/lib/style.css'

//导入mui
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'
//导入app组件
import app from './app.vue'

//定义全局过滤器 
// Vue.filter('dataFormat',function(){

// })

var vm = new Vue({
    el: '#app',
    render: function (createElements) {
        return createElements(app)
    },
    //1.3挂载路由对象到vm实例上
    router,
    //挂载store状态管理对象到vm实例上
    store  
})
